<template>
    <div>
        <module-title title="配套人员紧缺指数"></module-title>
        <div ref="lack-right-module-chart1" style="height:450px"></div>
        <div class="dashDivider" style="margin-top:0"></div>
        <div class="flex" style="padding-top:18px">
            <div class="indicator value">{{val}}</div>
            <div class="indicator value">{{numbers}}</div>
            <div class="indicator value">{{percent}}</div>
        </div>
        <div class="flex" style="padding-top:10px">
          <div class="label"><p>{{ labelname }}</p><p>人数</p></div>
            <div class="label"><p>{{labelname}}</p><p>累计服务人数</p></div>
          <div class="label"><p>{{ labelname }}</p><p>人均服务人数（月均）</p></div>
        </div>
        <div ref="lack-right-module-chart2" style="height:320px"></div>
    </div>
</template>
<script>
import ModuleTitle from '../ModuleTitle.vue'
import * as echarts from 'echarts';
export default {
    components: { ModuleTitle },
    props: {
        data: Object
    },
    data() {
        return {
            chart1: null,
            chart2: null,
            percent:0,
            val:0,
            numbers:0,
            labelname:'配套人员'
        }
    },
    watch: {
      data: {
        handler() {
          setTimeout(() => {
              this.showInfo()
            this.showChart(this.chart1, 'lack-right-module-chart1', this.getOption1())
            this.showChart(this.chart2, 'lack-right-module-chart2', this.getOption2())

          }, 100);
        },
        immediate: true,
        deep: true
      }
    },
  mounted() {
    this.showInfo()
  },
    methods: {
      showInfo() {
        this.val = this.data.value1
        this.percent = this.data.value2
        this.numbers = this.data.value3
          this.labelname='配套人员'
      },
        showChart(instance, id, option) {
            if (!instance) {
                instance = echarts.init(this.$refs[id]);
            } else {
                instance.clear()
            }
            instance.setOption(option);
            instance.off()
            instance.on("click", params=> {

            if (id === 'lack-right-module-chart2'){
              console.log('点击',params)
              // this.val = params.data.value
              // this.percent = params.data.percent
              // this.numbers = params.data.numbers
              // this.labelname = params.data.name
            }
          })

      },
      getOption1() {
        let serie = {
                type: 'pictorialBar',
                symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            }
            let data = this.data.list1;
            return {
                // tooltip: this.getTooltipItem(),
                title: {
                    text: '近五个月剧组人数情况',
                    textStyle: {
                        color: '#FFF', fontSize: 16,
                        fontWeight: 400
                    },
                    top: 20,
                    left: 'center',

                },
                grid: {
                    bottom: 45,
                    top: 55,
                    left: 58,
                    right: 35
                },
                xAxis: {
                    data: data.map(e => e.name),
                    axisLabel: {
                        color: '#FFF'
                    },
                    axisTick: {show: false},
                    name: '月份',
                    nameLocation: 'start',
                    nameTextStyle: {
                        color: '#FFF',
                        lineHeight: 28,
                        verticalAlign: "top",
                    },

                    axisLine: {
                        show: false,
                    },
                    nameGap: 10
                },
                yAxis: [{
                    name: '人数：万人',
                    nameTextStyle: {
                        color: '#FFF',
                        opacity: 0.72,
                        fontSize: 16,
                        padding: [0, 0, 0, -5]
                    },
                    axisLabel: {
                        color: '#FFF'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255, 0.16)',
                            type: 'dashed',
                            dashOffset: 2
                        }
                    },
                }],
                series: [{
                    name: '招生情况',
                    data: data.map(e => e.value),
                    yAxisIndex: 0,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 1, color: 'rgba(255,160,10,1)'
                            }, {
                                offset: 0.5, color: 'rgba(255,160,10,0.5)'
                            }, {
                                offset: 0, color: 'rgba(8,132,255,0)'
                            }]
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: function(value) {
                            return `{a|${value.data}}\n{dot| }`
                        },
                        rich: {
                            dot: {
                                width: 4,
                                height: 4,
                                borderColor: '#64E6E2',
                                align: 'center',
                                borderWidth: 1,
                                borderRadius: 2
                            },
                            a: {
                                color: 'white',
                                align: 'center',
                                padding: 2,
                                fontSize: 14
                            }
                        }
                    },
                    ...serie
                }]
            }
      },
      getOption2() {
        let angle = 0;
            let legendCommon = {
                icon: 'rect',
                itemWidth: 8,
                itemHeight: 8,
                itemGap: 10,
                textStyle: {
                    color: '#FFF',
                    fontSize: 16,
                    rich: {
                        value: {
                            fontSize: 16,
                            color: '#64E6E2'
                        }
                    }
                }
            }
            let total = 0;
            this.data.list2.forEach(e => {
                total += parseInt(e.value);
            });
            let array = this.data.list2;
            return {
                legend: [{
                    bottom: 20,
                    width: '100%',
                    orient: 'vertical',
                    formatter: function(name) {
                        var value = 0;
                        for(let i = 0; i < array.length; i++) {
                            if(name == array[i].name) {
                                value = array[i].value
                            }
                        }
                        console.log("total："+total)
                        console.log("value："+value)
                        var p = Math.round((value / total) * 100)
                        return `${name}  {value|  ${p}%}`
                    },
                    left: '60%',
                    top: 'center',
                    data: this.data.list2,
                    ...legendCommon,
                }],
                title: {
                    text: '各类配套人员\n占比',
                    top: '42%',
                    left: '28%',
                    textAlign:'center',
                    textStyle: {
                      color: '#FFF',
                      lineHeight: 28,
                      fontSize: 20,

                    }
                },
                color: ['#0884FF', '#65D2FF', '#30D158', '#FFD60A', '#FFA00A', '#FF453A', '#BF5AF2'],
                series: [{
                    name: '',
                    type: 'pie',
                    radius: ['60%', '75%'],
                    center: ['28%','50%'],
                    data: this.data.list2 ,
                    label: {show: false},
                    top: 0
                }, {
                    type: 'custom',
                    coordinateSystem: "none",
                    renderItem: function(params, api) {
                        return {
                            type: 'arc',
                            shape: {
                                cx: api.getWidth() / 3.6,
                                cy: api.getHeight() / 2 ,
                                r: Math.min(api.getWidth(), api.getHeight()) * 11 / 40,
                                startAngle: (0+-angle) * Math.PI / 180,
                                endAngle: (360+-angle) * Math.PI / 180
                            },
                            style: {
                                stroke:{
                                    type: 'linear',
                                    x: 1,
                                    y: 0,
                                    x2: 0,
                                    y2: 0.5,
                                    colorStops: [{
                                        offset: 1, color: '#47F6FE'
                                    },{
                                        offset: 0.2, color: 'rgba(71,139,255,0.2)'
                                    },{
                                        offset: 0, color: 'rgba(71,139,255,0)'
                                    }]
                                },
                                fill: "transparent",
                                lineWidth: 4
                            },
                            silent: true
                        };
                    },
                    data: [0]
                }, {
                     type: 'gauge',
                    startAngle: 0,
                    endAngle: 360,
                    center: ['28%', '50%'],
                    // top: '-15%',
                    radius: '100%',
                    axisLine: {show: false},
                    splitLine: {show: false},
                    axisLabel: {show: false},
                    axisTick: {
                        splitNumber: 13,
                        lineStyle: {
                            color:'rgba(187,237,255,0.72)'
                        }
                    },
                }]
            }
      }
    }

}
</script>
<style lang="less" scoped>
.flex {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.indicator {
    background-image: url('../../assets/indicator-bg.png');
    background-size: 100% 100%;
    text-align: center;
    width: 128px;
    height: 52px;
    line-height: 52px;
    font-size: 24px;

}
.label{
  width:200px;
  p {
    margin:0;
    padding:0;
    line-height: 20px;
  }
}
</style>
